<template>
  <div class="paypassword">
    <van-nav-bar
      :title="$t('password.titlelogin')"
      left-arrow
      @click-left="point.onClickLeft"
    />
    <div class="paypassword-body">
      <van-form ref="form">
        <van-cell-group :border="false">
          <div class="paypassword-label marg-btm">{{ t("password.old") }}</div>
          <van-field
            v-model="data.oldPass"
            :type="showold ? 'text' : 'password'"
            name="oldPass"
            :border="false"
            class="dev-field"
            :placeholder="t('password.oldmsg')"
            :rules="[{ validator: point.loginPass }]"
          >
            <template #right-icon>
              <van-icon v-if="showold" name="eye-o" @click="eye(false, 1)" />
              <van-icon v-else name="closed-eye" @click="eye(true, 1)" />
            </template>
          </van-field>
          <div class="paypassword-label marg-btm">{{ t("password.new") }}</div>
          <van-field
            v-model="data.newPass"
            :border="false"
            :type="shownew ? 'text' : 'password'"
            name="newPass"
            class="dev-field"
            :placeholder="t('password.newmsg')"
            :rules="[{ validator: point.loginPass }]"
          >
            <template #right-icon>
              <van-icon v-if="shownew" name="eye-o" @click="eye(false, 2)" />
              <van-icon v-else name="closed-eye" @click="eye(true, 2)" />
            </template>
          </van-field>
          <div class="paypassword-label marg-btm">
            {{ t("password.confirm") }}
          </div>
          <van-field
            v-model="newPass"
            :border="false"
            :type="showconfirm ? 'text' : 'password'"
            name="newPass"
            class="dev-field"
            :placeholder="t('password.confirmmsg')"
            :rules="[{ validator: point.loginPassAgain }]"
          >
            <template #right-icon>
              <van-icon
                v-if="showconfirm"
                name="eye-o"
                @click="eye(false, 3)"
              />
              <van-icon v-else name="closed-eye" @click="eye(true, 3)" />
            </template>
          </van-field>
          <div class="paypassword-tel">
            <div class="teltitle">{{ $t("bind.email") }}</div>
            <div class="telvalue">{{ point.userInfo.email }}</div>
          </div>
          <div class="paypassword-label margin-top">{{ t("bind.code") }}</div>
          <van-field
            v-model="data.code"
            type="text"
            name="code"
            class="dev-field"
            :placeholder="t('bind.codemsg')"
            :loading="sendLoading"
            :rules="[{ required: true, message: t('bind.codemsg') }]"
          >
            <template #button>
              <sendBtn
                slot="suffix"
                @click="onSend"
                ref="sendbtnRef"
                type="1"
                :email="point.userInfo.email"
              />
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </div>

    <div class="paypassword-foot">
      <van-button
        type="primary"
        round
        width="244px"
        @click="onSubmit"
        :loading="subLoading"
        >{{ t("password.btn") }}</van-button
      >
    </div>
  </div>
</template>

<script setup>
import sendBtn from "@/components/sendBtn";
import { updateLoginPassword, sendEmailCode } from "@/api/user";
import { ref, reactive } from "@vue/reactivity";
import { Toast } from "vant";
import { useI18n } from "vue-i18n";
import { onMounted } from "vue";
const { t } = useI18n();
import usePoint from "@/hooks/usePoint.js";
const point = usePoint();
const data = reactive({
  newPass: "",
  code: "",
  oldPass: "",
});
const newPass = ref("");
const showold = ref(false);
const shownew = ref(false);
const showconfirm = ref(false);
const form = ref(null);
let sendLoading = ref(false);
let subLoading = ref(false);
let msg = reactive({});
const sendbtnRef = ref(null);
onMounted(() => {});
function eye(val, type) {
  switch (type) {
    case 1:
      showold.value = val;
      break;
    case 2:
      shownew.value = val;
      break;
    case 3:
      showconfirm.value = val;
      break;
  }
}
async function onSend() {
  // await form.value.validate()
  console.log(123);
  sendbtnRef.value.onSend();
}
async function onSubmit() {
  console.log(333);
  await form.value.validate();
  updateLoginPassword({
    ...data,
    email: JSON.parse(localStorage.getItem("user")).email,
  })
    .then((res) => {
      if (res.code != 200) {
        Toast(res.msg);
      } else {
        Toast(t("password.successMsg"));
      }
      console.log(res);
      subLoading.value = false;
    })
    .catch((err) => {
      Toast(err);
      subLoading.value = false;
    });
}
</script>

<style lang="less" scoped>
.paypassword {
  &-label {
    line-height: 14px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-top: 13px;
  }
  &-body {
    padding: 0px 16px;
  }
  &-foot {
    margin-top: 41px;
    text-align: center;
    button.van-button.van-button--primary.van-button--normal.van-button--round {
      width: 244px;
    }
  }
  .marg-btm {
    margin-bottom: 8px;
  }
  .margin-top {
    margin-top: 21px;
  }
  &-tel {
    display: flex;
    margin-top: 21px;
    justify-content: space-between;
    .teltitle {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      line-height: 13px;
    }
    .telvalue {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #a3a3a3;
      line-height: 13px;
    }
  }
}
</style>
